<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新闻中心</title>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
          crossorigin="anonymous">
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        body{
            max-width: 1920px;
            min-width: 0;
            margin-left: auto;
            margin-right: auto;
            background-color: #fff;
        }
        .text-white{color: #FFFFFF;}
        .t-r{text-align: right;}
        a{
            cursor: pointer;
            text-decoration: none;
            outline: none;
            color: #8d526d;
        }
        .header a:hover{color: #FFFFFF;text-decoration:none}
        .header-top-bg{background-color: #8d526d;height: 60px;}
        .header-top{
            height: 42px;
            line-height: 42px;
            font-size: 16px;
            width: 1266px;
            margin: auto;
            padding: 7px;
        }
        .header-top-banner-item{
            display: inline-block;
            vertical-align: middle;
            padding: 7px 14px;
            position: relative;
            font-size: 16px;
            line-height: 1.5;
        }
        .header-center{
            background-color: #f2f2f2;
            height: 115px;
            padding: 31px 0px;
        }
        .inner{width: 1266px;margin: auto;height: 60px;padding: 4px 5px;}
        .heard-menu{
            height: 52px;
            float: right;
            display: inline-block;
            font-size: 16px;
            line-height: 1.5;
            font-weight: bold;
        }
        .header-logo{
            background-color: lightgray;
            height: 50px;
            width: 300px;
            float: left;
        }
        .header-bottom .action-item a{display: block;}
        .block{position: relative;}
        .banner{
            min-height: 180px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .inner{width: 1280px;max-width: 100%;}
        .sidebar{
            margin-top: -144px;
            position: relative;
            margin-bottom: 14px;
        }
        .sidebar .sidebar-header{
            padding: 14px 28px;
            background-color: #8d526d;
            color: #fff;
        }
        .sidebar .sidebar-header i{
            margin-right: 14px;
            display: inline-block;
            font-size: 20px;
        }
        .sidebar .sidebar-header h2{
            font-size: 20px;
            color: inherit;
            font-weight: normal;
            display: inline-block;
        }
        .sidebar ul.menu li{
            position: relative;
            background-color: inherit;
            border-bottom: 1px solid #c6c6c6;
            list-style-type: none;
            list-style-image: none;
            line-height: 150%;
            margin-bottom: 0;
        }
        .sidebar .sidebar-header ul.menu a{
            position: relative;
            overflow: hidden;
            font-size: 16px;
            color: #000000;
        }
        .sidebar ul.menu li > a{
            display: block;
            padding: 21px 14px;
            background-color: #F2F2F2;
            color: #000000;
        }
        .sidebar ul.menu li > a:hover{
            color: #8D526D;
            text-decoration:none
        }
        .breadcrumbb{
            text-align: right;
            margin-bottom: 30px;
            margin-top: -60px;
            color: #aaa;
        }
        .list .list-item .list-title a{
            font-size: inherit;
            color: inherit;
        }
        .list .list-item .list-title a:hover{
            color: #8D526D;
            text-decoration:none
        }
        .footer-bottom{
            background-color: #333;
            text-align: center;
            color: #fff;
            line-height: 1.5;
            padding: 10.5px 0;
        }
        .footer-bottom p{
            margin: 0 0 7px;
            line-height: 1.5;
            color: #333;
            font-size: 14px;
        }
    </style>
</head>

<div id="app">
    <el-container>
        <el-header style="height: 160px;padding: 0;">
            <!-- 顶部导航条 -->
            <div class="header">
                <div>
                    <div class="header-top-bg ">
                        <div class="header-top t-r ">
                            <div class="header-top-banner-item ">
                                <a class="text-white" href="/demo/userr/userLogin.html" target="_blank">患者</a>
                            </div>
                            <div class="header-top-banner-item ">
                                <a class="text-white" href="/demo/admin/adminIndex.html" target="_blank">员工</a>
                            </div>
                            <div class="header-top-banner-item ">
                                <a class="text-white" target="_blank">E</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 顶部中间 部分 -->
                <div class="header-center">
                    <div class="inner">
                        <div class="header-logo">
                            logo
                        </div>
                        <div class="heard-menu">
                            <el-menu
                                    class="el-menu-demo"
                                    mode="horizontal"
                                    background-color="#f2f2f2"
                                    text-color="#000000"
                                    active-text-color="#8d526d">
                                <el-submenu index="1">
                                    <template slot="title">医院概况</template>
                                    <el-menu-item index="1-1">医院介绍</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                </el-submenu>
                                <el-submenu index="2">
                                    <template slot="title">新闻中心</template>
                                    <el-menu-item
                                        v-for="(val, i) in columnArr"
                                        v-bing:index=" '2-' + '{{ val.id }}' ">
                                        <a href="/demo/presscenter.html">{{ val.cname }}</a>
                                    </el-menu-item>
                                </el-submenu>
                                <el-submenu index="3">
                                    <template slot="title">患者服务</template>
                                    <el-menu-item index="2-3">选项1</el-menu-item>
                                </el-submenu>
                                <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>
                            </el-menu>
                        </div>
                    </div>
                </div>
            </div>
        </el-header>


        <el-main style="padding: 0;">
            <div id="content">
                <div>
                    <div class="top">
                        <div class="block">
                            <div class="banner" style="background-image: url(img/press_banner.jpg);"></div>
                            <div class="inner"></div>
                        </div>
                    </div>
                    <div class="centent">
                        <div class="inner">
                            <div class="row">
                                <div class="col-xs-12 col-md-3">
                                    <div class="sidebar">
                                        <div class="sidebar-header">
                                            <i class="el-icon-s-unfold"></i>
                                            <h2 >新闻中心</h2>
                                        </div>
                                        <ul class="menu" style="list-style-type:none">
                                            <li style="z-index: 9;"
                                                v-for="(val, i) in columnArr">
                                                <a :href=" '/demo/hospitalnews/newsCenter.html?id=' + val.id "
                                                   target="newsContent"
                                                   v-html="val.cname">
                                                    {{ val.cname }}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-md-9">
                                    <div style="margin-top: -100px;">
                                        <el-breadcrumb class="breadcrumbb" separator="/" >
                                            <el-breadcrumb-item :to="{ path: '/' }">
                                                <a href="/demo">首页</a>
                                            </el-breadcrumb-item>
                                            <el-breadcrumb-item>
                                                <a href="/demo/presscenter.html">新闻中心</a>
                                            </el-breadcrumb-item>
                                            <el-breadcrumb-item>医院新闻</el-breadcrumb-item>
                                        </el-breadcrumb>
                                    </div>
                                    <div class="block" >
                                        <iframe name="newsContent" src="/demo/hospitalnews/hospitalNews.html" width="100%" height="1200" frameborder="0"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom"></div>
            </div>

        </el-main>



        <div style="height: 28px;"></div>
        <el-footer style="padding: 0;height: 64px;">
            <div class="footer-bottom">
                <div class="inner">
                    <div class="footer-text">
                        <p class="text-align-center">
		  				<span style="font-size: 14px;">
		  					<span style="color: #FFFFFF;">版权所有：XXXXXXXXXX</span>
		  					<a href="" target="_blank">
		  						<span style="color: #FFFFFF;">xxxxxxxxx备号</span>
		  					</a>
		  				</span>
                        </p>
                    </div>
                </div>
            </div>
        </el-footer>
    </el-container>

</div>

<script type="text/javascript">



    $.get("/demo/hospitalNews/queryHospitalNews", function (backData) {
        haha.newsInfo = backData.data;
    });

    /* 查询新闻栏目的信息 */
    $.get("/demo/column/newsListNewsColumn", function (backData) {
        haha.columnArr = backData.data;
    });

    var haha = new Vue({
        el:"#app",
        data:{
            newsInfo:[],
            columnArr:[],
        },
        methods:{

        }
    });

</script>
<body>
</body>
</html>
